import React, {Component} from "react";
import {Select, Table, Tag} from "antd";
import {MyButton} from "../style";
import {connect} from "react-redux";
import {queryState, RandomStr} from "@/util/global";
import {
    CheckCircleOutlined,
    CloseCircleOutlined,
    ManOutlined,
    QuestionOutlined,
    SafetyOutlined,
    UserOutlined,
    WomanOutlined
} from '@ant-design/icons';
import {actions as AdminAction} from "@/store/common/admin";
import BanDialog from './BanDialog';
import {AdminConsole_mapStateToProps} from "../../index";
import {userListCol} from "@/js/columns";
import {resetUserStatus} from '@/util/Api';

const {Option} = Select;

class UserList extends Component {
    constructor(props) {
        super(props);
        this.banOp = this.banOp.bind(this);
        this.tableActionContent = this.tableActionContent.bind(this);
        this.banUser = this.banUser.bind(this);
        this.unBanUser = this.unBanUser.bind(this);
        this.handleBanUserRemark = this.handleBanUserRemark.bind(this);
        this.handleBanType = this.handleBanType.bind(this);
        this.state = {
            columns: userListCol(this),
            TableLoading: false,
            BanUserModalVisible: false,
            SelectedUser: [],
            /*封禁用户时，管理员应填写的备注*/
            banUserRemark: '',
            /*封禁用户时，管理员应选择的类型 （此Value对应statusId）*/
            banType: '',
            /*封禁用户时，选择封禁类型的所有选项*/
            banTypeTemp: []
        }
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        /*输入内容时不更新界面*/
        return !(nextState.BanUserModalVisible && this.state.BanUserModalVisible);

    }

    componentWillMount() {
        this.initBanTypeTemp();
    }

    /*组件初始化时调用，以初始banTypeTemp*/
    initBanTypeTemp() {
        let status = queryState('sysStatus.statusList');

        let banTypeTemp = status.filter((item) => {
            return item['can_login'] === 0;
        })
        this.setState({
            banTypeTemp
        })

    }

    /*表单中操作按钮点击后的展示内容*/
    tableActionContent(record) {
        return <>
            {
                parseInt(record.statusId) === 200 ?
                    <>
                        <MyButton type="primary" onClick={() => this.banUser(record)} danger>禁止登陆</MyButton>
                        <br/>
                    </>
                    :
                    <>
                        <MyButton type="primary" onClick={() => this.unBanUser(record)} danger>解除封禁</MyButton>
                        <br/>
                    </>

            }
            <MyButton type="primary" danger>{record.userid}</MyButton>
        </>
    }

    unBanUser(record) {
        resetUserStatus({id: record.userid}).then(res => {
            this.props.loadData();
        })
    }

    /*管理员触发禁止登录按钮时调用*/
    banUser(record) {
        let user = this.state.SelectedUser
        user.push(record)
        this.setState({
            BanUserModalVisible: true,
            SelectedUser: user
        })
    }

    userSexTag(sex) {
        switch (sex) {
            case 0:
                return <Tag color={'#7599ff'} icon={<ManOutlined/>} key={RandomStr()}>{'男孩'}</Tag>;
            case 1:
                return <Tag color={'#ff9dae'} icon={<WomanOutlined/>} key={RandomStr()}>{'女孩'}</Tag>;
            default:
                return <Tag color={'default'} icon={<QuestionOutlined/>} key={RandomStr()}>{'未知'}</Tag>;
        }
    }

    userIdentity(isAdmin) {
        let flag = isAdmin === 0;
        return (
            <Tag color={flag ? '#a3a3a3' : '#ff6713'}
                 icon={flag ? <UserOutlined/> : <SafetyOutlined/>}
                 key={RandomStr()}>
                {flag ? '玩家' : '管理'}
            </Tag>
        )
    }

    banOp() {
        this.state.banTypeTemp.forEach((item, index) => {
            return (
                <Option value={item['statusId']} key={index}>
                    {item['statusName']}
                </Option>
            )
        })
    }

    userStatusTag(statusId) {
        let status = queryState('sysStatus.statusList');
        let ban = false;
        if (status) {
            for (let i in status) {
                if (status[i]['statusId'] === parseInt(statusId)) {
                    ban = status[i]['canLogin'] === 1;
                    break;
                }
            }
        }
        switch (ban) {
            case true:
                return <Tag icon={<CheckCircleOutlined/>} color="#39D000" key={RandomStr()}>正常</Tag>
            case false:
            default :
                return <Tag icon={<CloseCircleOutlined/>} color="#fe3300" key={RandomStr()}>封禁</Tag>
        }

    }

    handleBanType(e) {
        this.setState({
            banType: e.target.value
        })
    }

    handleBanUserRemark(e) {
        this.setState({
            banUserRemark: e.target.value
        })
    }

    render() {
        const {
            UserCurrentPage, UserCounts, UserListPageSize,
            /*Methods*/
            handleChangePage, handleChangePageSize, loadData
        } = this.props
        const pagination = {
            showSizeChanger: true,
            showTotal: () => `共${UserCounts}条数据`,
            defaultCurrent: UserCurrentPage,
            total: UserCounts,
            pageSize: UserListPageSize,
            onChange: (page) => changePage(page),
            onShowSizeChange: (page, size) => changePageSize(size)
        }

        /*点击更改页码时*/
        function changePage(page) {
            if (page === UserCurrentPage) {
                return
            }
            handleChangePage(page)
        }


        /*点击更改页面显示数据条数时*/
        function changePageSize(size) {
            if (size === UserListPageSize) {
                return
            }
            handleChangePageSize(size)
        }

        return (
            <>
                <Table
                    style={{float: 'left', width: '100%'}}
                    columns={this.state.columns}
                    dataSource={this.props.UserList}
                    size={'small'}
                    pagination={pagination}
                    loading={this.state.TableLoading}
                    scroll={{x: 1000}}
                />
                {
                    this.state.BanUserModalVisible ?
                        <BanDialog
                            show={this.state.BanUserModalVisible}
                            onCancel={() => this.setState({
                                BanUserModalVisible: false,
                                SelectedUser: [],
                                banType: '',
                                banUserRemark: ''
                            })}
                            banType={this.state.banType}
                            TypeOnChange={(e) => this.handleBanType(e)}
                            banTypeTemp={this.state.banTypeTemp}
                            RemarkOnChange={(e) => this.handleBanUserRemark(e)}
                            textValue={this.state.banUserRemark}
                            SelectedUser={this.state.SelectedUser}
                        /> : ''
                }
            </>
        )
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleChangePage(int) {
            dispatch(AdminAction.setUserInfoCurrentPage(int))
            dispatch(AdminAction.SAGA_QueryUserList)
        },
        handleChangePageSize(int) {
            dispatch(AdminAction.setUserInfoPageSize(int))
            dispatch(AdminAction.SAGA_QueryUserList)
        },
        loadData() {
            dispatch(AdminAction.SAGA_QueryUserList)
        }
    }
}
export default connect(AdminConsole_mapStateToProps, mapDispatchToProps)(UserList);
